<template>
    <div class="box">
        <ul>
            <li 
                v-for="good in dataList" 
                :key="good.id"
                @click="goDetail(good.id)">
                {{good.text}}
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dataList:[
                    {
                        id:"001",
                        text:"商品1"
                    },
                    {
                        id:"002",
                        text:"商品2"
                    },
                    {
                        id:"003",
                        text:"商品3"
                    },
                ]
            }
        },
        methods: {
            goDetail(id){
                console.log('跳转了')
                /* 
                    get：参数放在url后面，查询串 loaction.search
                    post：参数携带在请求体中
                 */
                // location.href = "/detail?id="+id

                //query传参
                // this.$router.history.push('/detail?id='+id)

                //动态路由
                // this.$router.history.push(`/detail/${id}`) //动态路由参
                // this.$router.history.push('/detail/'+id)

                //命名路由
                this.$router.history.push({
                    name:'mydetail',
                    // params:{
                    //     id
                    // },
                    query:{
                        id
                    }
                })
            },
        }
    }
</script>
<style lang="scss" scoped>
    
</style>